<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">

    <script type="importmap">
        {
            "imports":{
                "vue": "https://unpkg.com/vue@3/dist/vue.esm-browser.js"
            }        
        }
    </script>
</head>

<body>

    <div id="app" @click="count++">{{ message }} : {{ count }}

        <div>
           <input class="button1" type="button" @click="count++" value="按钮+1"/>
        </div>
    </div>

</body>

</html>

<!-- es module写法  -->
<script type="module">
    import { createApp } from 'vue'
    //import {MyComponent} from './my-component.js'

    createApp({
        data() {
            return {
                message: 'helloWorld',
                count: 0
            }
        }
    })
        .mount("#app")

    // 需要启服务器才能访问到./my-component.js
    /*createApp(MyComponent)
    .mount("#app")*/
</script>

<style>
    .button1 {
        display: grid;
        width: 500px;
        height: 100px;
    }

</style>